<script>
export default {
  name: "news_component",
  data() {
    return {
      newsList: [
        {
          id: '1',
          title: "新闻1",
          content: "新闻1的内容",
          author: "张三",
          date: "2020-01-01",
        },
        {
          id: '2',
          title: "新闻2",
          content: "新闻2的内容",
          author: "李四",
          date: "2020-01-02",
        },
        {
          id: '3',
          title: "新闻3",
          content: "新闻3的内容",
          author: "王五",
          date: "2020-01-03",
        }],
    }
  },
}
</script>

<template>
  <div>
    <ul>
      <li v-for="item in newsList" :key="item.id">
        <!--      params携带参数跳转路由，to的字符串写法  -->
        <!--                <router-link :to="`/message/news/detail/${item.id}/${item.title}/${item.content}/${item.author}/${item.date}`">
                          {{item.title}}
                        </router-link>-->
        <!--       params携带参数跳转路由，to的对象写法 这种方式必须使用name而不能使用path -->
        <router-link :to="{
          name:'detail',
          params:{
            id:item.id
            ,title:item.title
            ,content:item.content
            ,author:item.author
            ,date:item.date
          }
        }">
          {{ item.title }}
        </router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<style scoped>

</style>